<template>
  <div class="activity">
    <!-- 图片 -->
    <img src="../assets/img/activity.jpg" alt="活动展示" style="width:100%;height:300px;" />
    <!-- 缓冲 -->
    <Spin size="large" fix v-if="spinShow"></Spin>
    <!-- 主体 -->
    <div class="main">
      <Row type="flex" justify="space-between" class="code-row-bg row1">
        <Col span="18">
          <Row class="condition">
            <Card class="mt20">
              <ul class="flex">
                <li>
                  <span class="title">举办社团：</span>
                  <Input type="text" style="width:150px" v-model="params.activity.teamname" />
                </li>
                <li class="ml10" style="flex:1;">
                  <span class="title">活动名称：</span>
                  <Input type="text" style="width:150px" v-model="params.activity.activityName" />
                </li>
                <li>
                  <Button type="primary" @click="getActivity">搜索</Button>
                </li>
              </ul>
            </Card>
          </Row>
          <Card style="margin-top:10px;">
            <Timeline>
              <TimelineItem v-for="item in activityList" :key="item.id">
                <p class="time">{{item.createTime}}</p>
                <div class="content" style="line-height:80px;border-bottom:1px dashed #ccc;">
                  <router-link :to="{path:'activity_detail',query:{activityId:item.id}}">
                    <div class="flex align_items_centeer">
                      <img
                        :src="item.photos||'/static/default_team_img.png'"
                        alt="活动图片"
                        class="team_logo"
                      />
                      <span class="ml10 title">{{item.activityName}}</span>
                      <span class="ml10">举办方:{{item.teamname}}</span>
                      <span class="ml10 address">举办地点:{{item.address}}</span>
                    </div>
                  </router-link>
                </div>
              </TimelineItem>
            </Timeline>
          </Card>
          <div style="margin: 20px auto; text-align:center;">
            <Page
              :total="total"
              :current="params.current"
              :page-size="params.size"
              class="page"
              @on-change="pageChange"
            />
          </div>
        </Col>
        <Col span="5">
          <Card class="mt20">
            <div class="flex align_items_centeer">
              <div class="blue_column"></div>
              <span style="margin-left:10px;font-size:18px;">社团是什么？</span>
            </div>
            <div class="mt20">
              <p style="text-indent:2em;">
                社团是有一群有着共同的兴趣和爱好组成的团体，随着我国高等教育的不断发展，
                大学生对丰富多彩的校园文化话生活充满了渴望，他们希望在学习之余，可以进行
                一系列的社会实践活动，从而在事件中学习提高自己。为了满足心理、文化、生活、
                社会需要，他们自发建立了具有一定目标和活动规范的非正式团体————社团。现在的
                大学社团正迎来它的黄金时期，各种社团如雨后春笋办涌入大学生的视野。社团是
                大学文化的重要组成部分，维系着学校与学生的平衡，肩负着满足大学生业余文化
                的需求。
              </p>
            </div>
            <div class="flex align_items_centeer mt20">
              <div class="blue_column"></div>
              <span style="margin-left:10px;font-size:18px;">活动意义</span>
            </div>
            <div class="mt20">
              <p style="text-indent:2em;">
                学生社团已渐渐成为校园文化生活中重要的组成部分，在
                我校扮演着校园活动的主力军角色。社团为学生的互动搭造了舞台，
                让同学们有了更好的发展空间。而社团的发展要不断地向前，
                因此社团的队伍也要不断地壮大，所以招新是社团活动的一个关键步骤。
              </p>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import ActivityService from "../assets/js/activity";
export default {
  name: "activity",
  data() {
    return {
      spinShow: false, //缓冲
      activityList: [], //活动列表
      params: {
        current: 1,
        size: 10,
        activity: {
          teamname: "",
          activityName: ""
        }
      }, //获取活动列表的参数
      total: 0 //活动总数
    };
  },
  methods: {
    /*页码改变*/
    pageChange(page) {
      this.params.current = page;
      this.getActivity();
    },
    // 获取活动列表
    getActivity() {
      this.spinShow = true;
      ActivityService.getManageActivity(this.params).then(res => {
        if (res.code == 0) {
          this.activityList = res.data.records;
          this.total = res.data.total;
        } else {
          this.$Message.error(res.msg);
        }
        this.spinShow = false;
      });
    }
  },
  created() {
    this.getActivity();
  }
};
</script>
<style lang="scss">
.activity .main .team_logo {
  width: 50px;
}
// 时间 轴  时间
.activity .main .time {
  font-size: 18px;
}
.activity .main .content .title {
  font-size: 18px;
  color: $base_color;
  font-weight: bold;
}
.activity .main .content .address {
  color: #888;
}
.activity .main .content:hover {
  margin-left: 40px;
  transform: scale(1.1);
}
.activity .condition li span.title {
  width: 80px;
}
</style>